<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            td input {
                height: 54px;
                font-size: 32px;
                width: 120px;
                background: none;
                outline: none;
                border: none;
            }
            table.resultTable {
                margin: 20px auto;
                font-size: 32px;
            }
            table.mainSheet tr {
                border: solid 1px black;
                height: 54px;
            }
            table.mainSheet td {
                border: 1px solid black;
            }
            table.mainSheet th,
            table.mainSheet td,
            table.mainSheet .gpa {
                width: 120px;
                box-shadow: 0px 0px 5px green;
            }
            table.resultTable td {
                height: 54px;
                font-size: 32px;
                width: 120px;
            }
            .btns {
                text-align: center;
            }
            .btn {
                width: 144px;
                height: 54px;
                font-size: 24px;
                text-align: center;
                cursor: pointer;
                border-radius: 5px;
                background-color: rgb(18, 255, 81);
                transition: all 0.3s;
            }
            .delete {
                cursor: pointer;
            }
            input[type="number"]::-webkit-inner-spin-button,
            input[type="number"]::-webkit-outer-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }
        </style>
        <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
        <script src="./bootstrap/js/bootstrap.min.js"></script>
        <script src="./js/jQuery.min.js"></script>
    </head>
    <body>
        <nav class="nav nav-pills justify-content-center" role="navigation">
            <a href="./index.html" class="nav-link">主页</a>
            <a href="#" class="nav-link active">GPA</a>
            <a href="./notes.html" class="nav-link">Note</a>
            <a href="./todoList.html" class="nav-link">Todo</a>
        </nav>

        <div class="container justify-content-center">
            <div class="row">
                <div class="col"></div>
                <div class="col">
                    <h1 class="text-center mt-4">天津大学绩点计算器</h1>

                    <table class="mainSheet text-center mx-auto fs-2">
                        <thead>
                            <tr>
                                <th>学分</th>
                                <th>成绩</th>
                                <th>绩点</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="text-center">
                                <td>
                                    <input
                                        type="number"
                                        name=""
                                        id="credit"
                                        class="text-center"
                                    />
                                </td>
                                <td>
                                    <input
                                        type="number"
                                        name=""
                                        id="grade"
                                        class="text-center"
                                    />
                                </td>
                                <td class="gpa text-center"></td>
                                <td
                                    class="delete text-danger text-decoration-underline"
                                >
                                    删除
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="btns mt-5">
                        <input
                            type="button"
                            value="计算"
                            class="calc btn btn-primary fs-3"
                        />
                        <input
                            type="button"
                            value="加一行"
                            class="addRow btn btn-primary fs-3"
                        />
                    </div>
                    <table class="resultTable">
                        <tr>
                            <th>总学分</th>
                            <th>总加权</th>
                            <th>绩点</th>
                        </tr>
                        <tr class="result text-center">
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </table></div>
                <div class="col">
                    <span class="form-check form-switch mt-4 ms-5">
                        <input
                            class="form-check-input"
                            type="checkbox"
                            id="autoComplt"
                        />
                        <label class="form-check-label" for="autoComplt"
                            >自动保存</label
                        >
                    </span>
                </div>
            </div>
        </div>

        <script>
            let calcBtn = document.querySelector(".calc");
            let addBtn = document.querySelector(".addRow");
            let tbody = document.querySelector("tbody");
            let result = document.querySelector(".result");
            let firstRow = tbody.children[0].cloneNode(1);

            let autoComplt = document.querySelector("#autoComplt");
            let data;

            function gpaCalc(grade) {
                let result;
                if (grade >= 90) {
                    result = 4.0;
                } else if (grade >= 85) {
                    result = 3.7;
                } else if (grade >= 82) {
                    result = 3.3;
                } else if (grade >= 78) {
                    result = 3.0;
                } else if (grade >= 75) {
                    result = 2.7;
                } else if (grade >= 72) {
                    result = 2.3;
                } else if (grade >= 68) {
                    result = 2.0;
                } else if (grade >= 64) {
                    result = 1.5;
                } else if (grade >= 60) {
                    result = 1.0;
                } else {
                    result = 0.0;
                }
                return result;
            }

            $("table.mainSheet tbody tr:odd").css(
                "background-color",
                "rgb(199, 215, 231)"
            );
            $("table.mainSheet tbody tr:even").css("background-color", "white");
            addBtn.addEventListener("click", function () {
                cloneRow = firstRow.cloneNode(1);
                cloneRow.children[3].addEventListener("click", function () {
                    tbody.removeChild(this.parentNode);
                    $("table.mainSheet tbody tr:odd").css(
                        "background-color",
                        "rgb(199, 215, 231)"
                    );
                    $("table.mainSheet tbody tr:even").css(
                        "background-color",
                        "white"
                    );
                });
                tbody.append(cloneRow);
                $("table.mainSheet tbody tr:odd").css(
                    "background-color",
                    "rgb(199, 215, 231)"
                );
                $("table.mainSheet tbody tr:even").css(
                    "background-color",
                    "white"
                );
            });

            // 计算单行绩点
            // 按tju计算方法

            tbody.addEventListener("keyup", function (e) {
                let grade = parseInt(
                    e.target.parentNode.parentNode.children[1].children[0].value
                );
                let gpa = e.target.parentNode.parentNode.children[2];
                gpa.innerHTML = gpaCalc(grade);
            });

            // 计算加权按钮
            calcBtn.addEventListener("click", function () {
                let creditSum = 0;
                let gpaSum = 0;
                let gradeSum = 0;

                // 浏览器localstorage存储数据
                let grades = new Array();
                let credits = new Array();
                let gpas = new Array();

                for (let i = 0; i < tbody.children.length; i++) {
                    let grade = parseFloat(
                        tbody.children[i].children[1].children[0].value
                            ? tbody.children[i].children[1].children[0].value
                            : 0
                    );
                    // 存入grades数组
                    grade ? grades.push(grade) : false;

                    let credit = parseInt(
                        tbody.children[i].children[0].children[0].value
                            ? tbody.children[i].children[0].children[0].value
                            : 0
                    );
                    // 存入credits学分
                    credit ? credits.push(credit) : false;

                    let gpa = parseFloat(
                        tbody.children[i].querySelector(".gpa").innerHTML
                            ? tbody.children[i].querySelector(".gpa").innerHTML
                            : 0
                    );
                    // 计算加权
                    gradeSum += grade * credit;
                    creditSum += credit;
                    gpaSum += credit * gpa;
                    gpa ? gpas.push(gpa) : false;
                }
                result.children[0].innerHTML = creditSum ? creditSum : "不";
                result.children[1].innerHTML =
                    gradeSum / creditSum
                        ? (gradeSum / creditSum).toFixed(2)
                        : "知";
                result.children[2].innerHTML =
                    gpaSum / creditSum ? (gpaSum / creditSum).toFixed(2) : "道";

                data = {
                    grades: grades,
                    credits: credits,
                    gpas: gpas,
                };

                localStorage.setItem("data", JSON.stringify(data));
            });

            let restore = () => {
                let lastData = JSON.parse(localStorage.getItem("data"));
                for (let i = 0; i < lastData.grades.length; i++) {
                    addBtn.click();
                    tbody.children[i].children[0].children[0].value =
                        lastData.credits[i];
                    tbody.children[i].children[1].children[0].value =
                        lastData.grades[i];
                    tbody.children[i].children[2].innerHTML = lastData.gpas[i];
                }
                console.log(lastData);
                calcBtn.click();
            };
            // 设置第一个删除按钮
            let delBtn = document.querySelector(".delete");
            delBtn.addEventListener("click", function () {
                tbody.removeChild(this.parentNode);
            });

            autoComplt.addEventListener("click", () => {
                console.log(autoComplt.checked);
                localStorage.checked = autoComplt.checked;
            });

            window.onload = function () {
                if (localStorage.getItem("checked") === "true") {
                    autoComplt.checked = true;
                } else {
                    autoComplt.checked = false;
                }
                if (autoComplt.checked) {
                    restore();
                }
            };
        </script>
    </body>
</html>
